<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>哈哈</span>
		<ul>
			
		</ul>
		<button id="btn">按钮</button>
	</body>
	<script src="jquery-3.2.1.js"></script>
	<script type="text/javascript">
		
		$(function(){
			
			var oLi = document.createElement('li');
			oLi.innerHTML = '路飞';
			
			//追加元素
			$('ul').append('<li><a href="#">luffy</a></li>');
			$('ul').append(oLi);
			//如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
			$('ul').append($('span'));
			
			
			//appendTo()
			
			$('<a href="#">路飞2</a>').appendTo($('ul'));
			
			
//			prepend 插入到被选中的元素的第一个位置
			$('ul').prepend('<li>我是第一个元素</li>')
			$('<li>我是第0个元素</li>').prependTo($('ul'))
			
			
			//after  before
			
			$('ul').after('<h3>我是一个三级标题</h3>');
			
			//insertAfter
			$('<a href="#">第一个</a>').insertAfter($('ul'));
			
			
			$('ul').before('<h2>我是一个二级标题</h2>');
			
			//insertBefore
			
			
			
			
			//复制操作 clone()
			
			$('button').click(function(){
				
				//副本具有与真身一样的事件处理能力 完全克隆
				$(this).clone(true).insertAfter($(this));
				
			})
			
			
			//替换 
			
//			$('h3').replaceWith('<button>替换的按钮</button>');
			
			
//			$('<a href="#">替换超链接</a>').replaceAll('button');
			
			
			
			//删除
			//empty() 只是清空了被选的内容
			
//			$('ul').empty();

//			remove() 被选元素 也被删掉了 事件就没有 什么都没有

//			$('ul').remove();
			
			//detach()  移除匹配的节点元素  删除节点后 事件会保留
			
			var $btn = $('button').detach();	
			console.log($btn[0]);
			
			$('ul').append($btn[0]);
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		})
		
	</script>
</html>
